<script setup lang="ts">
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { getTopMenu, initRouter } from "@/router/utils";
import { useUserStoreHook } from "@/store/modules/user";
import { message } from "@/utils/message";
import type { FormInstance } from "element-plus";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import Motion from "../utils/motion";
import { loginRules } from "../utils/rule";

import Lock from "~icons/ri/lock-fill";
import User from "~icons/ri/user-3-fill";

defineOptions({
  name: "PasswordLogin"
});

const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(["update:loading", "login-success", "login-error"]);

const router = useRouter();
const ruleFormRef = ref<FormInstance>();

// 密码登录表单
const ruleForm = reactive({
  username: "admin",
  password: "123456"
});

// 密码登录
const onLogin = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(valid => {
    if (valid) {
      emit("update:loading", true);
      useUserStoreHook()
        .loginByUsername({
          username: ruleForm.username,
          password: ruleForm.password
        })
        .then(res => {
          if (res.success) {
            // 获取后端路由
            return initRouter().then(() => {
              router.push(getTopMenu(true).path).then(() => {
                message("登录成功", { type: "success" });
                emit("login-success");
              });
            });
          } else {
            message("登录失败", { type: "error" });
            emit("login-error");
          }
        })
        .finally(() => emit("update:loading", false));
    }
  });
};

defineExpose({
  ruleFormRef,
  onLogin
});
</script>

<template>
  <el-form ref="ruleFormRef" :model="ruleForm" :rules="loginRules" size="large">
    <Motion :delay="100">
      <el-form-item
        prop="username"
        :rules="[
          {
            required: true,
            message: '请输入账号',
            trigger: 'blur'
          }
        ]"
      >
        <el-input
          v-model="ruleForm.username"
          clearable
          placeholder="账号"
          :prefix-icon="useRenderIcon(User)"
        />
      </el-form-item>
    </Motion>

    <Motion :delay="150">
      <el-form-item prop="password">
        <el-input
          v-model="ruleForm.password"
          clearable
          show-password
          placeholder="密码"
          :prefix-icon="useRenderIcon(Lock)"
        />
      </el-form-item>
    </Motion>

    <Motion :delay="250">
      <el-button
        class="login-button"
        size="large"
        type="primary"
        :loading="loading"
        :disabled="disabled"
        @click="onLogin(ruleFormRef)"
      >
        登录
      </el-button>
    </Motion>
  </el-form>
</template>

<style lang="scss" scoped>
.login-button {
  width: 100%;
  height: 40px;
  font-size: 16px;
  border-radius: 6px;
}
</style>
